{extend name="public:penbase" /}
{block name="header"}
{include file="public/pentop-nav" /}
{/block}
{block name="content"}
<div class="weui-tab__panel" id="weui-tab__panel" style="background: #fff">
    <!-- Swiper -->
    <div class="swiper-container" style="height:150px">
        <div class="swiper-wrapper">
            {volist name="slide" id="image"}
            <a href="{$image.pc_url}" class="swiper-slide" style="background-image: url('IMG_ROOT{$image.image|resize=400}')">
                <div class="text">{$image.title}</div>
            </a>
            {/volist}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <a class="weui-cell weui-cell_access hot" href='{:url("article/getartlist")}'>
        <div class="weui-cell__hd">
            <div class="hot-l">
                <span>最新<b>热点</b></span>
                <img src="__PUBLIC__/pension/images/mes-dark.png" alt=""></div>
        </div>
        <div class="weui-cell__bd">
            <p class="hot-text">{$art1.title}</p>
        </div>
        <div class="weui-cell__ft"></div>
    </a>
    {include file="public/search" /}
    <div class="pro-title"><span></span>商品分类</div>
    <div class="pro-list-container">
        <div class="category-page-content ">
            <div class="category-box">
                <div class="category" id="category">
                    {volist name="category" id="vo"}
                    <a href="javascript:;" data-catid="{$vo.id}" class="viewCatTopItem">{$vo.name}</a>
                    {/volist}
                </div>
            </div>
            <ul id="fir">
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>

<!-- Swiper JS -->
<script src="__PUBLIC__/pension/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: true
    });
    document.getElementById("weui-tab__panel").addEventListener("scroll", function (ev) {
        var scrollTop = document.getElementById("weui-tab__panel").scrollTop;
        var category = document.getElementById("category");
        if (scrollTop > 180) {
            category.classList.add("category-fixed")
        } else {
            category.classList.remove("category-fixed")
        }
    })
</script>
<!-------------------------------------------->
<script>
    document.getElementById("weui-tab__panel").addEventListener("scroll", function (ev) {
        var scrollTop = document.getElementById("weui-tab__panel").scrollTop;
        var category = document.getElementById("category");
        if(scrollTop > 78 ) {
            category.classList.add("category-fixed")
        } else {
            category.classList.remove("category-fixed")
        }
    });
</script>
<script>
    $(function () {
        // 默认load第一个分类的列表
        var vie = $('.viewCatTopItem');
        vie.eq(0).addClass('active');
        getGoods(vie.attr('data-catid'));
    });

    // 左侧按钮点击
    $('.viewCatTopItem').click(function () {
        var id = $(this).attr('data-catid');
        $('.viewCatTopItem.active').removeClass('active');
        $(this).addClass('active');

        getGoods(id);
    });

    function getGoods(id){
        var type = "{$type}";
        $.ajax({
            url : "{:url('category/get_goods')}",
            data : {id:id,type:type},
            type : 'post',
            success : function(d){
                console.log(d);
                if(d == null || d == false || d == undefined || d.length == 0){
                    $('#fir li').remove();
                    $('#fir').append(
                            "<li class='flex' > " +
                            "<div style='display: flex;align-items: center;justify-content: center;text-align: justify;width:200px;height:200px;margin:0 auto;'> " +
                            "<p>抱歉~~，暂无商品!</p> " +
                            "</div> " +
                            "</li>"
                    );
                }else {
                    $('#fir li').remove();
                    for(var i=0;i<d.length;i++){
                        $('#fir').append(
                                "<li> "+
                                "<a href='/mobile/goods/detail?id="+ d[i].goods_id +"'>"+
                                "<img class='pro-img' src='"+ d[i].image +"' > "+
                                "<p class='title'>"+ d[i].name +"</p>"+
                                "<p class='price'>价格："+ d[i].price +
                                "<span class='shopping-car'></span>" +
                                " </p> " +
                                "</a> " +
                                "</li>"
                        );
                    }
                }
            }
        });
    }
</script>

{/block}